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BAB 3 
CSS BACKGROUND 


Background dikenal sudah sejak lama sebagai penghias, baik untuk 
foto, image, atau kebutuhan lainnya. Background berlaku pula 
untuk penghias halaman web. Dalam desain web, background 
yang bisa digunakan berupa color dan image. Penggunaan color 
sebagai background tentunya akan mudah dibaca oleh browser 
secara cepat karena hanya berisi suatu skrip (nilai color), tapi lain 
halnya apabila kita menggunakan background image. 


Penggunaan background image memang memberikan keindahan 
tersendiri pada web yang dibuat, akan tetapi terkadang kita tidak 
memperhatikan ukuran image yang digunakan, hal ini berdampak 
pada proses loading browser. Tentunya apabila image yang di- 
gunakan berukuran besar, akan membutuhkan waktu yang cukup 
lama untuk di-load (ditampilkan). 


Penggunaan CSS untuk background banyak sekali manfaatnya, 
misalnya saja, kita tidak perlu menggunakan background image 
yang berukuran besar atau ukurannya sama dengan web yang di- 
buat, karena dengan fasilitas repeat yang terdapat dalam CSS, kita 
bisa me-repeat image yang kecil menjadi lebih besar dari ukuran 
sebenarnya. Dengan sedikit trik, Anda bisa menampilkan back- 
ground ber-gardient, tentunya dengan ukuran image yang kecil. 


Selain itu, properti CSS background mengizinkan kita untuk me- 
ngatur warna, setting image, repeat image secara horizontal mau- 
pun vertikal. 


21 


3.1 Browser dan W3C Support 


Untuk mengetahui support browser pada properti Background, 
dapat dilihat pada tabel berikut ini. 


Tabel 3.1 Browser dan W3C Support untuk Background 


Properti 


Value 


Browser 





Fire- 
fox 


W3C 





Background 


Background- 
attachment 


background-color 
background-image 
background-repeat 
background-attachment 
background-position 


scroll 
fixed 





Background- 
color 


Background- 
image 


color-rgb 
color-hex 
color-name 
transparent 


url (URL) 
none 





Background- 
position 


top left 

top center 
top right 
center left 
center center 
center right 
bottom left 
bottom center 
bottom right 
xh yh 

xXpos ypos 





Background- 
repeat 








repeat 
repeat-x 
repeat-y 
no-repeat 

















Sumber: www.w3schools.com 
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3.2 Properti Background 


Berikut ini penjelasan beberapa properti yang bisa digunakan untuk 
mengatur Background pada CSS. 


3.21 Background-Color 


Digunakan untuk mengatur warna pada background. Nilai yang 
bisa diatur adalah color dan transparent. 


s Color 


Sama seperti pada bahasa HTML, nilai bisa diatur menggunakan 
nama color secara langsung (Blue, Red, Yellow, dan lainnya), nilai 
RGB warna (255, 0, 0), dan hexadesimal yang dimulai dengan ka- 
rakter “#” yang diikuti enam angka desimal sebagai pengatur 
warna. Contoh: (#FFFFFF). 


»  Transparent 
Untuk mengatur transparansi warna. 


Sintaks: 


Selector (property :value:) 
body ( 
background-color: value: 


5 
Contoh: 


Misalnya saja Anda mau memberikan warna hijau sebagai back- 
ground pada web yang dibuat, maka sintaks yang perlu Anda tulis 
sebagai berikut. 
body ( 
background-color: green: /“ dengan menuliskan nama “/ 
background-color: #009900: /“ nilai hexadesimal “/ 
background-color: 0,150,0: /“ nilai RGB “/ 
5 


Contoh lengkapnya: 
«chtml xmlns-"http://www.w3.org/1999/xhtml"» 
shead» 


«stitle»Background Color«/title» 
cstyle type-"text/css"» 
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body ( 
background-color: #009900: 
color: #FFFFFF, 

5, 

c/style»s 

«/head» 


«body» 
Sh1»LATAR BELAKANG HIJAU «/hl» 
«/body» 
«/html» 





Tampilan di browser Internet Explorer akan terlihat seperti gambar 
di bawah ini. 





(3 Bursuuun Culup sileyosui Intsrnar Beolurar SN Woptng Ojilind) Aa (Dj (xx) 
Eile Edit View Favorites Tools Help “ 


| @ aa "uu be) ad AN £ Search Yg Favortes @) media @ 


Links 2 (@isnagit kj 


LATAR BELAKANG HIJAU 










| Address #1 Didbuku. cssilatihan-background-color.html nd 2 Kes 








4 My Computer 
Gambar 3.1 Tampilan Background Color di Browser Internet Explorer 
Dalam mendesain sebuah web, warna merupakan hal penting, ka- 


rena dengan penggunaan warna yang baik, maka akan menimbul- 
kan kesan tersendiri untuk pengunjung web tersebut. 


Anda juga harus memilih warna sesuai dengan tema web yang 
Anda buat. Misalnya, web dengan tema untuk anak-anak guna- 
kanlah warna-warna yang ceria. 


3.2.2 Background-Image 


Properti ini dalam CSS digunakan untuk mengatur penggunaan 
image sebagai background. Format image yang didukung oleh 
CSS antara lain JPEG, GIF, dan PNG. 
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Nilai yang bisa diatur dalam background, yaitu none dan URL. None 
berarti background image tidak digunakan, sedangkan kalau URL 
berarti background image digunakan dengan merujuk pada suatu 
lokasi file atau URL (Uniform Resource Locator) di internet. 


Sintaks: 


Selector (property:value: ) 
body (£ 
background-image: none | url : 


5 


Contoh: 


html» 
chead» 
«title» Background Image «/title» 
«style type-"text/css"» 
body ( 
background-image: url (image/background. jpeg) : 
5 
/“ memanggil file background.jpeg yang ditempatkan di folder 
image “/ 
c/head» 
cbody» 
«/body- 
«/html» 


Simpan dengan nama latihan-background.html. Jalankan browser 
Internet Explorer atau browser yang Anda miliki, kemudian buka 
file latihan-background.html, tampilannya akan sebagai berikut. 





Ga (5 P3) &A HB JP Search JG Favortes @) media @ @- 2 5 





Address (B1 Dilbuku. esstlatihan-background.html 








2 My Computer 


Gambar 3.2 Tampilan Background Image di Browser Internet Explorer 
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Catatan: 


Pada contoh tersebut, kita bisa menggunakan URL yang lokasinya 
berada di alamat web yang Anda miliki sendiri, misalnya saja di 
www.websaya.com/image/background.jpeg. 





3.2.3 Background-Attachment 


Properti ini tentunya tidak terdapat pada HTML. Properti ini digu- 
nakan untuk mengatur penggunaan scrolibar pada halaman web, 
apakah secara fixed atau scroll. 


Kalau anda menggunakan nilai “fixed”, Anda tidak bisa melakukan 
scrolling mouse pada halaman web, sedangkan kalau Anda mem- 
berikan nilai “scroll”, maka Anda bisa melakukan scrolling mouse 
pada halaman web. 


Sintaks: 


Selector fproperty:value:) 
body £ 
background-attachment: fixed | scroll: 


| 


Contoh: 


body ( 
background-attachment: scroll: 


5 


3.2.4 Background-Repeat 


Digunakan untuk me-repeat atau memperbesar ukuran image yang 
kecil agar menyesuaikan dengan ukuran halaman web. Penggunaan 
background repeat hanya bisa dilakukan apabila Anda telah me- 
ngatur background menggunakan properti image. Nilai repeat yang 
bisa diatur antara lain: 


» Repeat 


Me-repeat image, baik secara horizontal maupun secara vertikal. 
Dengan nilai repeat, maka semua halaman web akan terisi kese- 
luruhannya oleh background. 
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Contoh: 


chtmL» 

chead» 

«title» Repeat Backgroudx/title» 
cstyle type-"text/css"» 


body ( 
background-repeat: repeat: 
background-image: url(image/star.jpg): 


5 


«/style» 
«c/head» 
«body» 
«/body» 
«/html» 


Jalankan browser Internet Explorer, maka hasilnya akan seperti 


gambar di bawah ini. 





File Edit Yiew Favorites Tools Help (4 


Oa - O bi AG JP search SG Fovortes @P media @ 2-5 (CA 


Address |(#J Dstbuku. cssilatihan. & repeat.html Go | Links 2 


» 

















PA SS SA SL LE SA SS 


4 My Computer 











Gambar 3.3 Tampilan Image Repeat di Browser Internet Explorer 


» Repeat-X 
Me-repeat image dengan posisi horizontal. 
Sintaks: 

Selector (property:value) 

body ( 


background-repeat: repeat-xj 


: 
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Contoh: 


chtmL» 

chead» 

«title» Repeat Backgroudx/title» 
cstyle type-"text/css"» 


body ( 
background-repeat: repeat-x: 
background-image: url (image/star.jpg): 


5 


«s/style»s 
«/head» 
«body» 
«/body» 
«/html» 


Jalankan browser Internet Explorer, maka hasilnya akan seperti 
gambar di bawah ini. 





Byun ane usut Intan fiz BAHAN a 'Cj (Xx) 








Eile Edit Wiew Favorites Tools Help “ 


Dsa- D- lal RW Psema Yg Favortes @reda (2-5 KT 
Address |#J Drtbuku. essilatihan. ba. repeat-x.html Eco ine 


SY 
KAKAK KP 


» 











€1 one "4 My Computer 





Gambar 3.4 Tampilan Image Repeat-X di Browser Internet Explorer 


s Repeat-Y: 
Me-repeat image dengan posisi vertikal atau lurus ke atas. 


Sintaks: 


Selector (property : value: ) 
body ( 
background-repeat: repeat-y: 


5 
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Contoh: 


chtmL» 

chead» 

«title» Repeat Backgroudx/title» 
cstyle type-"text/css"» 


body ( 
background-repeat: repeat-y 
background-image: url(image/star.jpg): 


5 


«s/style»s 
«/head» 
«body» 
«/body» 
«/html» 


Jalankan browser Internet Explorer, maka hasilnya akan seperti 
gambar di bawah ini. 





3 usut Basu Un leyusuf Intainat Beulujay a a (Xx) 





Elle Edit View Favorites Tools Help “ 
5 A| @ AN i a “AD! A.A Ka - 
@ Back D (el & (Dj Search “7 G Favorites BG media LI 3 aw 


Address |(#J Dilbuku. essilatihan bg. repeat-y.html ME links 2 








PS Done 2 My Computer 





Gambar 3.5 Tampilan Image Repeat-Y di Browser Internet Explorer 
» No-Repeat 


Tidak melakukan repeat pada image. Jadi, image akan ditampilkan 
sesuai dengan ukuran aslinya. 
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P3) Done | My Computer 








Gambar 3.6 Tampilan Image No-Repeat di Browser Internet Explorer 


3.2.5 Background-Position 


Digunakan untuk mengatur posisi background yang akan diguna- 
kan. Hal yang pertama harus Anda lakukan adalah mengatur 
properti background-nya menjadi image. 


Posisi background yang bisa diatur adalah top, center, bottom, dan 
left, center, right. 


Sintaks: 


Selector (property:value) 

body (£ 

background-image: url(value): 

/“ tentukan posisi background yang akan digunakan “/ 
background-position:top| center | bottom || left | center | 
right : 

background-repeat: no-repeat: 


5 


Contoh: 


Misalkan kita ingin menempatkan sebuah background image di 
bawah tengah halaman web, maka penulisan skrip css-nya adalah 
sebagai berikut. 
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chtml» 
chead» 
cstyle type-"text/css"» 


body ( 

background-image: url (image/background.JPG) : 

/4 tentukan posisi background yang akan digunakan “/ 
background-position: bottom center: 
background-repeat: no-repeat: 


: 


«s/style»s 
«/head» 
«body» 
«/body» 
«/html» 


Jalankan browser Internet Explorer, maka hasilnya akan seperti 
gambar di bawah ini. 





(2 UnttedDorimente Hit osniianternei Etuluyan a (p) (Xx) 


File Edit View Favorites Tools Help 2” 


€) ») P3 & A JP search YG Favortes @P sedia @ (3 


Address 4) Ditbuku. essilatihan. bg. position.html Mas uns 2 @snagtt tj 














P3 Done 2 My Computer 





Gambar 3.7 Tampilan Background Position Bottom 


Selain menentukan posisi background secara default (bottom, top, 
center, left, dan right), kita juga bisa menentukan posisi background 
menggunakan nilai x6 dan yX4 persen. 


Contoh: 


Kita akan menentukan posisi background tepat di tengah-tengah 
halaman web, kalau Anda menggunakan posisi yang default, maka 
sintaknya sebagai berikut. 
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cstyle type-"text/css"» 

body ( 
background-image: url (image/background.JPG) : 
/“ tentukan posisi background yang akan digunakan “/ 
background-position: center center: 
background-repeat: no-repeat: 

5 

c/styles 


Tetapi kalau Anda menggunakan nilai xX dan y4, maka penulisan 
sintaks seperti di bawah ini. 


cstyle type-"text/css"» 
body ( 
background-image: url (image/background.JPG) : 
/“ tentukan posisi background yang akan digunakan “/ 
background-position: 508 508: 
background-repeat: no-repeat: 
5 
«/styles 


Jalankan Internet Explorer, kalau kita preview di browser, maka 
hasilnya sebagai berikut. 








€j United Vusuman nileyosui Intsina Btuluyay a 'o| & 
File Edit View Favorites Tools Help "3 
AI @ tan : Pe 2 
D ») P3 Ad D - ) Search Y.£ Favorites & Media @ t3- 
| Address #1 Didbuku. cssilatihan bg. | position.html (vi BI co Links 2 & Snadlt (sj 








"3 Done 2 My Computer 





Gambar 3.8 X4 dan Y4 Position 


Hal yang sama dapat Anda lakukan untuk mengatur posisi lain- 
nya, tentunya dengan mengubah nilai persen yang digunakan. 
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